<template>
	<view class="container">
		<view>
			<desc-wrapper :title="title" :desc="desc"></desc-wrapper>
			<z-card justifyContent="center">
				<view class="card-content-item" style="display: flex;align-items: center;">
					<text class="card-content-label_left">类型</text>
					<view class="card-content_right">
						<uni-data-checkbox selectedColor="#4e6542" selectedTextColor="#333" v-model="form.type"
							:localdata="types"></uni-data-checkbox>
					</view>
				</view>
				<uni-transition :styles="{'opacity':1,}" mode-class="fade" :show="form.type === 0">
					<view class="card-content-item">
						<text class="card-content-label_left">星座</text>
						<view class="card-content_right">
							<uni-data-select class="xingzuo" isCustomIndicator
								style="margin-right: 10rpx; margin-bottom: 10rpx" :clear="false" v-model="constellation"
								:localdata="constellationData"></uni-data-select>
						</view>
					</view>
				</uni-transition>
				<uni-transition :styles="{'opacity':0,}" mode-class="fade" :show="form.type === 1">
					<view class="card-content-item">
						<text class="card-content-label_left">生肖</text>
						<view class="card-content_right">
							<uni-data-select class="shengxiao" isCustomIndicator style="margin-right: 10rpx; margin-bottom: 10rpx"
								:clear="false" v-model="chineseZodiac" :localdata="chineseZodiacData"></uni-data-select>
						</view>
					</view>
				</uni-transition>

			</z-card>
			<view class="bottom-btns">
				<view class="start-btn" @click="onClick_1">
					<text class="">开始</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '每日运势',
				desc: '缘份居结合梅花易数和星相学、生肖学研究出每日运势运势，以供查询，主要提供12星座和12生肖的今日运势。',
				form: {
					type: 0, //查询类型：范围是0～1，0 代表查询星座 ，1 代表查询生肖
					title_yunshi: '0' //运势ID
				},
				types: [{
						value: 0,
						text: '查星座\b'
					},
					{
						value: 1,
						text: '查生肖\b'
					}
				],
				constellation: '0',
				chineseZodiac: '0',
				constellationData: [{
						value: '0',
						text: '白羊座'
					},
					{
						value: '1',
						text: '金牛座'
					},
					{
						value: '2',
						text: '双子座'
					},
					{
						value: '3',
						text: '巨蟹座'
					},
					{
						value: '4',
						text: '狮子座'
					},
					{
						value: '5',
						text: '处女座'
					},
					{
						value: '6',
						text: '天秤座'
					},
					{
						value: '7',
						text: '天蝎座'
					},
					{
						value: '8',
						text: '射手座'
					},
					{
						value: '9',
						text: '魔蝎座'
					},
					{
						value: '10',
						text: '水瓶座'
					},
					{
						value: '11',
						text: '双鱼座'
					}
				],
				chineseZodiacData: [{
						value: '0',
						text: '鼠'
					},
					{
						value: '1',
						text: '牛'
					},
					{
						value: '2',
						text: '虎'
					},
					{
						value: '3',
						text: '兔'
					},
					{
						value: '4',
						text: '龙'
					},
					{
						value: '5',
						text: '蛇'
					},
					{
						value: '6',
						text: '马'
					},
					{
						value: '7',
						text: '羊'
					},
					{
						value: '8',
						text: '猴'
					},
					{
						value: '9',
						text: '鸡'
					},
					{
						value: '10',
						text: '狗'
					},
					{
						value: '11',
						text: '猪'
					}
				]
			}
		},
		methods: {
			onClick_1() {
				uni.request({
					url: 'https://cs.appzdm.com:3000/Zhanbu/yunshi',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: this.form,
					success: (res) => {
						uni.navigateTo({
							url: `/pages/yunshi/detail?params=${JSON.stringify(res.data.data)}`
						})
					},
					fail: (error) => {
						console.error('Request Failed:', error)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	::v-deep .xingzuo .uni-select{
				width: 165rpx;
				
		    }
	::v-deep .shengxiao .uni-select{
			width: 165rpx;
			}
</style>